<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">商品</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">添加分类</a></el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图  -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>添加分类</span>
        <el-button @click="$router.go(-1)" type="info" style="float:right">返回</el-button>
      </div>
      <div class="box-item">
        <!-- 添加分类表单  -->
        <el-form :model="addCategoryForm" :rules="addCategoryRules" ref="addCategoryRef" :label-width="formLabelWidth" class="demo-ruleForm">
          <el-form-item label="分类名称：" prop="name">
            <el-input v-model="addCategoryForm.name"></el-input>
          </el-form-item>
          <el-form-item label="商品分类：" prop="parentId">
            <!-- 级联菜单 -->
            <el-cascader v-model="addCategoryForm.parentId" :options="cascaderOptions" clearable  @change="handChange" :props="{
                  value: 'id',
                  label: 'name',
                  children: 'children'
                }"></el-cascader>  <el-link type="warning">不选择分类默认为顶级分类</el-link>
          </el-form-item>

          <el-form-item label="排序：">
            <el-input v-model="addCategoryForm.seq"></el-input>
          </el-form-item>

          <el-form-item label="是否显示：">
            <el-radio-group v-model="addCategoryForm.isShow">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="是否显示在导航栏：">
            <el-radio-group v-model="addCategoryForm.isMenu">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="选择模板：">
            <el-select v-model="addCategoryForm.templateId" placeholder="请选择模板">
              <el-option v-for="item in templatesOptions" :key="item.id" :index="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formLabelWidth: '170px',
      // 添加分类表单
      addCategoryForm: {isMenu: 1,isShow: 1},
      cascaderValue: [],
      // 分类数据
      cascaderOptions: [],
      // 添加分类规则
      addCategoryRules: {
        name: [{ required: true, messages: '请输入分类名称', trigger: 'blur' }]
      },
      // 模板集合
      templatesOptions: []
    }
  },
  methods: {
    async getCategoryList () {
      const { data: res } = await this.$http.get(`/goods/category/findAllMenus`)
      // const { data: res3 }  = await this.$http.get(`/goods/category/queryByParentId?parentId=1`,res)
      const { data: res2 } = await this.$http.get(`/goods/template/findAll`)
      this.cascaderOptions = res.data
      // console.log(res3);
      this.templatesOptions = res2
    },
    handChange() {

    },
    async onSubmit () {
      if(this.addCategoryForm.parentId.length === 0){
        this.addCategoryForm.parentId = 0
      }
      this.addCategoryForm.parentId = this.addCategoryForm.parentId[this.addCategoryForm.parentId.length-1];
      const { data: res } = await this.$http.post(`/goods/category/add`,this.addCategoryForm)
      if( res.code !== 200 ){
        this.$message.error('添加失败')
      }
      this.$message.success('添加成功')
    }
  },
  created () {
    this.getCategoryList()
  }
}
</script>
